<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>银行理财与保险服务</title>
    <link rel="stylesheet" href="../static/css/licaiceshi.css">
    <link href="../static/layui-v2.9.1/layui/css/layui.css" rel="stylesheet">
    <script src="../static/layui-v2.9.1/layui/layui.js"></script>
    <link rel="stylesheet" href="../static/css/footer.css">
    <link rel="stylesheet" href="../static/framework/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/framework/reset.css">
    <link rel="stylesheet" href="../static/bootstrap-5.3.0-dist/css/bootstrap.min.css">
    <script src="../static/bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    </div>
    <style>
        .body{
            width: 390.4px;

        }


        .header {
            width: 100%;
            position: fixed; /* 固定在页面顶部 */
            top: 0; /* 对齐到顶部 */
            left: 0; /* 从左侧开始 */
            background-color: #007bff; /* 背景颜色 */
            color: white; /* 文字颜色 */
            display: flex;
            justify-content: space-between; /* 子元素间的空隙 */
            align-items: center;
            padding: 1em 0; /* 上下内边距 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            z-index: 1000; /* 确保在顶层 */
            height: 64.8px; /* 高度 */
        }




        .d-cen1 {
            display: flex;
            align-items: center;
        }

        .d-cen1>div {
            font-weight: 400;
            padding-bottom: 12px;
            margin-right: 10px;
            color: #666;

        }

        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        ul li {
            display: inline-block;
            margin-right: 5px;
            margin-bottom: 10px;
        }

        ul li a {
            display: inline-block;
            padding: 4px 8px;
            background-color: transparent;
            text-decoration: none;
            color: #333;
            border-radius: 5px;
            font-size: 14px;

        }

        ul li a.active {
            background-color: #007bff;
            color: #fff;
        }

        /*
            ul li a:hover {
              background-color: #ddd;
            } */

        .tab-content {
            margin-top: 10px;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 5px;
        }

        .filter-container {
            padding: 20px;
            margin-bottom: 0;padding-bottom: 0;

        }

        .h-title {
            margin: 10px auto;
            text-align: center;
            background-color: #007bff;
        }

        .modal-content label {
            color: #666;
            width: 120px;
        }

        .modal-content input {
            padding: 8px;
            border-radius: 4px;
            outline: none;
            border: 1px solid #ddd;
        }

        .modal-content .d-cen1 {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .submit {
            width: 80%;
            background-color: #007bff;
            border-radius: 5px;
            margin: 20px auto;
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-size: 18px;
            color: #fff;
            cursor: pointer;
            text-align: center;
            outline: none;
            border: none;
        }
        .product{
            color: #666;
            font-family: Arial, Helvetica, sans-serif;
        }
        .product h3{
            color: #333;
            margin-bottom: 15px;
        }
        .search-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0;
        }

        .search-container input[type="text"] {
            width: 300px;
            padding: 10px 15px;
            border-radius: 25px 0 0 25px;
            border: 1px solid #ccc;
            outline: none;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .search-container input[type="text"]:focus {
            border-color: #007bff;
        }

        .search-container button {
            background-color: #007bff;
            color: white;
            padding: 10px 15px;
            border: none;
            cursor: pointer;
            border-radius: 0 25px 25px 0;
            font-size: 18px;
            transition: background-color 0.3s ease;
        }

        .search-container button:hover {
            background-color: #0056b3;
        }
        .footer{
            padding: 10px;
            position: fixed; /* 固定在底部 */
            left: 0;
            bottom: 0;
            width: 100%; /* 宽度铺满整个视口 */
        }
    </style>

</head>

<body>

<div class="header">
    <i class="fa fa-angle-left fa-2x" onclick="location.href='/finance'"
       style="font-size: 20px;margin-top: 10px;height: 22.8px">返回</i>
    <h1 style="margin: auto;">银行金融助手</h1>
    <p style="margin-right: 46.84px;"></p>
</div>

<br>
<br>
<br>
<br>


<div class="search-container">
    <input type="text" id="search" placeholder="搜索...">
    <button class="fa fa-search" onclick="searchProducts()"></button>
</div>
<br>

<form class="row g-3 " action="/financial/productSearch" method="get">

    <div class="col-md-3 " >
        <div class="layui-inline" >
            <label for="validationDefault" class="form-label">销售状态</label>
            <select class="form-select" name="costStatus" id="validationDefault">
                <option selected disabled value="">请选择...</option>
                <option value="1">已售</option>
                <option value="2">可售</option>
                <option value="3">未售</option>
            </select>

        </div>

        <!--    <div class="col-md-3">-->
        <div class="layui-inline" >
            <label for="validationDefault" class="form-label">风险等级</label>
            <select class="form-select" name="riskType" id="validationDefault01">
                <option selected disabled value="">请选择...</option>
                <option value="1">低</option>
                <option value="2">中</option>
                <option value="3">高</option>
            </select>
        </div>

        <!--    <div class="col-md-3">-->
        <div class="layui-inline" >
            <label for="validationDefault" class="form-label">开封闭类型</label>
            <select class="form-select" name="ocType" id="validationDefault02">
                <option selected disabled value="">请选择...</option>
                <option value="1">封闭</option>
                <option value="2">开放</option>
            </select>

        </div>

    </div>

    <div class="layui-form-item">
        <div class="layui-inline" style="display: flex; align-items: center;">
            <label class="layui-form-label" style="width: 100px;">时间范围</label>
            <div style="display: flex; align-items: center;">

                <input type="number" name="lowTime" placeholder="" autocomplete="off"
                       class="layui-input" style="width: 50px; margin-right: 5px;" min="0" step="1" lay-affix="number" >

                <div class="layui-form-mid">-</div>

                <input type="number" name="highTime" placeholder="" autocomplete="off"
                       class="layui-input" style="width: 50px; margin-left: 5px;" min="0" step="1" lay-affix="number">
            </div>
        </div>
    </div>

    <div class="col-12 " >
        <button class="btn btn-primary" type="submit" style="width: 100%">确定</button>
    </div>

</form>


<!-- 理财业务 -->
<div class="section" id="financial-products">
    <h2 class="h-title">理财业务</h2>

    <div th:each="product : ${session.financialProducts}">
        <!-- 理财数据显示 -->
        <div class="product">
            <h3 th:text="${product.productName}">产品1</h3>
            <p th:text="'业绩基准:' +  ${product.lowRate}">业绩基准</p>
            <p th:text="'投资期限：' + ${product.timeContinue}">投资期限</p>
            <p th:text="'起购金额' + ${product.beginMoney}">起投金额</p>
            <form action="/financeProductdetails" method="get">
                <input type="hidden" name="productId" th:value="${product.id}">
                <button class="button" id="button"onclick="location.href='/financeProductdetails'">购买理财产品</button>
            </form>
        </div>
    </div>

    <button class="button more-button" id="more-button1"
            onclick="showMoreProducts('financial-products')">点击查看更多</button>
</div>



</div>

<div class="footer">
    <p>版权所有 &copy; 2024 银行名称</p>
</div>

<script>
    //更多产品功能
    function showMoreProducts(sectionId) {
        var section = document.getElementById(sectionId);
        var products = section.querySelectorAll('.product');
        for (var i = 0; i < products.length; i++) {
            products[i].style.display = 'block';
        }
        var button = section.querySelector('.more-button');
        button.style.display = 'none';
    }

    //页面搜索功能
    var products = document.querySelectorAll('.product');
    var searchInput = document.getElementById('search');

    function searchProducts() {
        var searchValue = searchInput.value.trim().toLowerCase();
        var resultsFound = false;

        products.forEach(function(product) {
            var productName = product.querySelector('h3').innerText.toLowerCase();

            if (productName.includes(searchValue)) {
                product.style.display = 'block';
                resultsFound = true;
            } else {
                product.style.display = 'none';
            }
        });

        if (!resultsFound) {
            showNoResultsMessage();
        } else {
            hideNoResultsMessage();
        }

        hideMoreButtons(); // 隐藏更多按钮
    }

    function showNoResultsMessage() {
        var noResultsMessage = document.getElementById('no-results-message');
        if (noResultsMessage) {
            noResultsMessage.style.display = 'block';
        }
    }

    function hideNoResultsMessage() {
        var noResultsMessage = document.getElementById('no-results-message');
        if (noResultsMessage) {
            noResultsMessage.style.display = 'none';
        }
    }

    function hideMoreButtons() {
        var moreButton1 = document.getElementById('more-button1');
        if (moreButton1) {
            moreButton1.style.display = 'none';
        }
        var moreButton2 = document.getElementById('more-button2');
        if (moreButton2) {
            moreButton2.style.display = 'none';
        }
    }

    // 拟态框JavaScript代码
    // 获取模态框
    var modal = document.getElementById("productModal");

    // 获取按钮
    var btn = document.getElementById("button");

    // 获取 <span> 元素，关闭模态框
    var span = document.getElementsByClassName("close")[0];

    // 点击按钮打开模态框
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // 点击 <span> (x) 关闭模态框
    span.onclick = function() {
        modal.style.display = "none";
    }

    // 点击模态框外部关闭模态框
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

    // 处理表单提交
    function handlePurchase(event) {
        event.preventDefault();
        var form = document.getElementById("purchaseForm");
        var purchaseAmount = form.purchaseAmount.value;

        alert("购买金额：" + purchaseAmount);
        // 可以在这里添加进一步的购买处理逻辑，例如发送请求到服务器

        // 关闭模态框
        modal.style.display = "none";
    }
    layui.use(function(){
        var laydate = layui.laydate;
        // 渲染
        laydate.render({
            elem: '#ID-laydate-demo'
        });
        // 英文版
        laydate.render({
            elem: '#ID-laydate-demo-en',
            lang: 'en'
        });
    });
    // 获取Tab选项
    const tabItems = document.querySelectorAll('.tab1 li');
    tabItems.forEach((item) => {
        item.addEventListener('click', () => {
            // 移除所有Tab的active类名
            tabItems.forEach((tab) => {
                tab.querySelector('a').classList.remove('active');
            });

            // 添加当前点击的Tab的active类名
            item.querySelector('a').classList.add('active');
        });
    });

    const tabItems2 = document.querySelectorAll('.tab2 li');
    tabItems2.forEach((item) => {
        item.addEventListener('click', () => {
            // 移除所有Tab的active类名
            tabItems2.forEach((tab) => {
                tab.querySelector('a').classList.remove('active');
            });

            // 添加当前点击的Tab的active类名
            item.querySelector('a').classList.add('active');
        });
    });
    const tabItems3 = document.querySelectorAll('.tab3 li');
    tabItems3.forEach((item) => {
        item.addEventListener('click', () => {
            // 移除所有Tab的active类名
            tabItems3.forEach((tab) => {
                tab.querySelector('a').classList.remove('active');
            });

            // 添加当前点击的Tab的active类名
            item.querySelector('a').classList.add('active');
        });
    });
    const tabItems4 = document.querySelectorAll('.tab4 li');
    tabItems4.forEach((item) => {
        item.addEventListener('click', () => {
            // 移除所有Tab的active类名
            tabItems4.forEach((tab) => {
                tab.querySelector('a').classList.remove('active');
            });

            // 添加当前点击的Tab的active类名
            item.querySelector('a').classList.add('active');
        });
    });
</script>
</body>
</html>